
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery Banner Rotator</title>
    <link rel="stylesheet" type="text/css" href="preview.css"/>
	<link rel="stylesheet" type="text/css" href="banner-rotator.css"/>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.banner-rotator.min.js"></script>    
	<script type="text/javascript" src="js/preview.js"></script>
    <!--[if lt IE 9]>
  	<style>
    	.panel {
	    	border-left:1px solid #444;
			border-right:1px solid #444;
        }
    </style>
    <![endif]-->    
</head>
<body>
<div class="panel">
	<div class="title"><img src="title.png" alt="jQuery Banner Rotator"/></div>
 	<div class="container">
        <div id="preview1" class="banner-rotator">
            <ul>
                <li>
                    <a href="images/temple.jpg" title="temple"><img alt="" src="images/thumbs/temple.jpg"/></a>
                    <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                    <img alt="" src="images/tooltips/temple.jpg" class="tt-img"/>
                    <div class="tt-text">temple</div>                       
                    <div data-effect='expandDown' data-delay='0' style='top:75px;left:25px;width:0;height:0;background-color:#000;opacity:0.75;'>
                        <span class='layer-title'>jQuery Banner Rotator</span>                 	</div>                        
                    <div data-effect='expandRight' data-delay='400' style='top:125px;left:25px;width:300px;height:0;background-color:#fff;opacity:0.75;'>
                        <span style="color:#000">This jQuery plugin provides an easy way to create an image slideshow for your site.</span>                   	</div>
                </li>
                <li>
                    <a href="images/main_ghat.jpg" title="main ghat"><img alt="" src="images/thumbs/main_ghat.jpg"/></a>
                    <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                    <img alt="" src="images/tooltips/main_ghat.jpg" class="tt-img"/>
                    <div class="tt-text">main ghat</div>
                    <div data-effect='expandDown' data-delay='0' style='top:55px;left:45px;width:0;height:0;background-color:#669966;background-image:url(images/pattern_144.gif)'>
                        <span class='layer-title' style="color:#fff">jQuery Banner Rotator</span>                   	</div>              		
                    <div data-effect='expandDown' data-delay='300' style='top:100px;left:45px;width:0;height:0;background-color:#ff6666;background-image:url(images/pattern_153.gif)'>
                        <span style="font-size:15px">40+ transition effects available</span>                   	</div>              		
                    <div data-effect='expandDown' data-delay='600' style='top:134px;left:45px;width:0;height:0;background-color:#6699cc;background-image:url(images/pattern_130.gif)'>
                        <span style="font-size:15px">Transition effect can be adjusted per image including transition type, duration, and easing</span>                   	</div>
                    <div data-effect='expandDown' data-delay='900' style='top:172px;left:45px;width:0;height:0;background-color:#fff;background-image:url(images/pattern_096.gif)'>
                        <span style="font-size:15px;color:#000">Can set to auto play on startup with time delay for each image.</span>                   	</div>                                              	
                </li>
                <li>
                    <a href="images/triworks_abstract26.jpg" title="3D abstract art"><img alt="" src="images/thumbs/triworks_abstract26.jpg"/></a>   
                    <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                    <img alt="" src="images/tooltips/triworks_abstract26.jpg" class="tt-img"/>
                    <div class="tt-text">3D abstract art</div>
                    <div data-effect='moveLeft' style='top:20px;left:20px;width:0;height:0;background-color:#333;'>
                        <span class='layer-title'>jQuery Banner Rotator</span>                   	</div>                        
                    <div data-effect='moveRight' style='top:71px;left:20px;width:0;height:0;padding:5px;background-color:#0cf;'>
                        <span style="font-size:15px">Add multiple description layers over image</span>                   	</div>
                    <div data-effect='moveLeft' style='top:104px;left:20px;width:0;height:0;padding:5px;background-color:#fff;opacity:0.75;'>
                        <span style="font-size:15px;color:#000">Effect, effect speed, easing, and delay adjustable for each layer</span>                   	</div>
                    <div data-effect='moveRight' style='top:139px;left:20px;width:0;height:0;padding:5px;background-color:#96f;opacity:0.8;'>
                        <span style="font-size:15px">Description supports html as well as plain text</span>                   	</div>
                    <div data-effect='moveLeft' style='top:172px;left:20px;width:0;height:0;padding:5px;background-color:#9F0;'>
                        <span style="font-size:15px">Background color, background image, and opacity options for each layer</span>                   	</div>                                           	                   
                </li>
                <li>
                    <a href="images/singapore.jpg" title="singapore"><img alt="" src="images/thumbs/singapore.jpg"/></a>                  
                    <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                    <img alt="" src="images/tooltips/singapore.jpg" class="tt-img"/>
                    <div class="tt-text">singapore</div>
                    <div data-effect='moveRight' data-delay='0' style='top:122px;left:607px;width:160px;height:55px;padding:0;background-color:#131b28;background-image:url(images/jQuery_logo.png);background-position:center center;background-repeat:no-repeat;'>                   	</div>
                    <div data-effect='moveRight' data-delay='400' style='top:122px;left:332px;width:160px;height:55px;padding:0;background-color:#000;background-image:url(images/envato-logo.png);background-position:center center;background-repeat:no-repeat;'>                   	</div>
                    <div data-effect='moveRight' data-delay='800' style='top:122px;left:57px;width:160px;height:55px;padding:0;background-color:#333;background-image:url(images/logo-dark.png);background-position:left center;background-repeat:no-repeat;'>                   	</div>             
                </li>
                <li>
                    <a href="images/flowers.jpg" title="flowers"><img alt="" src="images/thumbs/flowers.jpg"/></a>        
                    <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                    <img alt="" src="images/tooltips/flowers.jpg" class="tt-img"/>
                    <div class="tt-text">flowers</div>
                    <div data-effect='expandDown' data-delay='0' style='top:15px;left:15px;width:115px;height:107px;padding:15px;background-color:#0cf;opacity:0.95;'>
                        <span style="font-size:22px;font-weight:bold">jQuery Banner Rotator</span>                   	</div>
                    <div data-effect='expandRight' data-delay='300' style='top:15px;left:170px;width:0;height:0;padding:5px;background-color:#fff;opacity:0.85;'>
                        <span style="color:#333">Many options available for thumbnails</span>                   	</div>
                    <div data-effect='expandLeft' data-delay='600' style='top:51px;left:170px;width:0;height:0;padding:5px;background-color:#fff;opacity:0.85;'>
                        <span style="color:#333">Thumbnails can display number, text caption, or images</span>                   	</div>
                    <div data-effect='expandRight' data-delay='900' style='top:87px;left:170px;width:0;height:0;padding:5px;background-color:#fff;opacity:0.85;'>
                        <span style="color:#333">Text or image tooltip available for each thumbnail</span>                   	</div>
                    <div data-effect='expandLeft' data-delay='1200' style='top:124px;left:170px;width:0;height:0;padding:5px;background-color:#fff;opacity:0.85;'>
                        <span style="color:#333">Thumbnails can be aligned horizontally or vertically, inside or outside of image area</span>                   	</div>                                                               
                </li>     
                <li>
                    <a href="images/hk.jpg" title="hong kong"><img alt="" src="images/thumbs/hk.jpg"/></a>                    
                    <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                    <img alt="" src="images/tooltips/hk.jpg" class="tt-img"/>
                    <div class="tt-text">hong kong</div>
                    <div data-effect='fade' data-delay='0' style='top:50px;right:18px;width:0;height:0;padding:10px;background-color:#0054FF;opacity:0.75;'>			
                        <span style="font-size:18px;color:#fff">jQuery Banner Rotator</span>                   	</div>
                    <div data-effect='fade' data-delay='600' style='top:97px;right:18px;width:0;height:0;padding:10px;background-color:#000;opacity:0.75;'>
                        directional and play buttons allow for easy navigation                   	</div>
                    <div data-effect='fade' data-delay='200' style='top:137px;right:18px;width:0;height:0;padding:10px;background-color:#000;opacity:0.75;'>
                        able to shuffle images in random order                   	</div>
                    <div data-effect='fade' data-delay='400' style='top:217px;right:18px;width:0;height:0;padding:10px;background-color:#000;opacity:0.75;'>
                        timer bar indicates time before rotation                   	</div>
                    <div data-effect='fade' data-delay='800' style='top:177px;right:18px;width:0;height:0;padding:10px;background-color:#000;opacity:0.75;'>
                        support mousewheel scrolling plus mobile device swipe gesture                   	</div>     
                </li>
                <li>
                    <a href="images/koala.jpg" title="koala bear"><img alt="" src="images/thumbs/koala.jpg"/></a>                    
                    <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                    <img alt="" src="images/tooltips/koala.jpg" class="tt-img"/>
                    <div class="tt-text">koala bear</div>
                    <div data-effect='moveLeft' data-delay='0' style='top:30px;left:30px;width:0;height:0;background-color:#99cc00;opacity:0.8;'>
                        <span style="font-size:20px;font-weight:bold;">jQuery Banner Rotator</span>                   	</div>
                    <div data-effect='moveLeft' data-delay='300' style='top:119px;left:30px;width:0;height:0;padding:8px;background-color:#fff;opacity:0.8;'>
                        <span style="color:#000">follow me on <a href="http://codecanyon.net/user/webtako/follow" target="_blank">codecanyon</a></span>                   	</div>
                    <div data-effect='moveLeft' data-delay='600' style='top:81px;left:30px;width:0;height:0;padding:8px;background-color:#fff;opacity:0.8;'>
                        <span style="color:#000">follow me on <a href="https://twitter.com/webtako" target="_blank">twitter</a></span>                   	</div>
                    <div data-effect='moveLeft' data-delay='900' style='top:157px;left:30px;width:0;height:0;padding:8px;background-color:#fff;opacity:0.8;'>
                        <span style="color:#000">copyright &copy; 2012 <a href="http://codecanyon.net/user/webtako" target="_blank">webtako</a></span>                   	</div>           	                           
                </li>
                <li>
                    <a href="images/china.jpg" title="china"><img alt="" src="images/thumbs/china.jpg"/></a>                    
                    <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                    <img alt="" src="images/tooltips/china.jpg" class="tt-img"/>
                    <div class="tt-text">china</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='0' style='top:25px;left:85px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:1;'>r</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='0' style='top:25px;left:57px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:9;'>o</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='0' style='top:25px;left:25px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:10;'>W</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='0' style='top:25px;left:167px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:4;'>r</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='0' style='top:25px;left:138px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:5;'>P</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='0' style='top:25px;left:110px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:6;'>d</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='0' style='top:25px;left:192px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:7;'>e</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='0' style='top:25px;left:220px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:8;'>s</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='0' style='top:25px;left:247px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:9;'>s</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='300' style='top:61px;left:25px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:11;'>B</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='300' style='top:61px;left:54px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:12;'>a</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='300' style='top:61px;left:110px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:13;'>n</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='300' style='top:61px;left:82px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:14;'>n</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='300' style='top:61px;left:138px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:15;'>e</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='300' style='top:61px;left:166px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:16;'>r</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='600' style='top:97px;left:25px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:17;'>R</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='600' style='top:97px;left:55px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:18;'>o</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='600' style='top:97px;left:83px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:19;'>t</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='600' style='top:97px;left:107px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:20;'>a</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='600' style='top:97px;left:135px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:21;'>t</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='600' style='top:97px;left:159px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:22;'>o</div>
                    <div data-effect='expandRight' data-duration='300' data-easing='linear' data-delay='600' style='top:97px;left:187px;bottom:;right:;width:0px;height:0px;background-color:#000;opacity:1;z-index:23;'>r</div>                    	                           
                </li>
                <li>
                    <a href="images/lion.jpg" title="lion"><img alt="" src="images/thumbs/lion.jpg"/></a>                    
                    <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                    <img alt="" src="images/tooltips/lion.jpg" class="tt-img"/>
                    <div class="tt-text">lion</div>
                    <div data-effect='moveRight' style='top:0;left:0;width:235px;height:280px;background-color:#000;opacity:0.7;'>                        
                        <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut orci sapien.</strong>
                        <ul style="color:#ccc;">
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                            <li>Sed accumsan molestie nisi, sed semper est tempor eu.</li>
                            <li>Nullam lacinia ipsum quis est tempus et adipiscing diam ornare.</li>
                            <li>Cras nec tortor rhoncus dui blandit bibendum eget a augue.</li>
                            <li>Quisque at mi in dolor auctor faucibus in et purus.</li>
                        </ul>
                    </div>                        
                    <div data-effect='moveUp' style='top:87px;left:593px;width:215px;height:0;padding:5px;opacity:0;'>
                        <div style="font-size:30px">jQuery Banner Rotator</div>
                    </div>
                    <div data-effect='moveDown' style='top:178px;left:595px;width:185px;height:37px;padding:0;opacity:0;'>		
                        <a href="http://codecanyon.net/item/jquery-banner-rotator-slideshow/109046" target="_blank"><div class="grad-button">Purchase Item</div></a>                    </div>                      	                           
                </li>
            </ul>
        </div>	
  </div>
    <div class="info-section">
        <div class="form-panel">
            <form name="ctrlForm">
             	<div class="form-sec">
                    <label for="transitions"><b>Transition:</b></label><br/>
                    <select name="transitions" id="transitions">
                        <option value="random" selected="selected">random</option>
                        <option value="none">none</option>
                        <option value="fade">fade</option>
                        <option value="crossFade">cross fade</option>
                        <option value="horizontalSlide">horizontal slide</option>
                        <option value="verticalSlide">vertical slide</option>
                        <optgroup label="vertical slices">
	                        <option value="verticalSliceRandomFade">random fade</option>
                            <option value="sliceDownRight">slice down right</option>
                            <option value="sliceDownLeft">slice down left</option>
                            <option value="sliceUpRight">slice up right</option>
                            <option value="sliceUpLeft">slice up left</option>	
                            <option value="sliceFadeRight">right fade</option>
                            <option value="sliceFadeLeft">left fade</option>
                            <option value="sliceAltRight">right alternate</option>
                            <option value="sliceAltLeft">left alternate</option>  
                            <option value="blindsRight">right blinds</option>
                            <option value="blindsLeft">left blinds</option>
                        </optgroup>
                        <optgroup label="horizontal stripes">
                        	<option value="verticalSliceRandomFade">random fade</option>
                            <option value="sliceRightDown">slice right down</option>
                            <option value="sliceLeftDown">slice left down</option>
                            <option value="sliceRightUp">slice right up</option>	
                            <option value="sliceLeftUp">slice left up</option>	
                            <option value="sliceFadeDown">down fade</option> 
                            <option value="sliceFadeUp">up fade</option>
                            <option value="sliceAltDown">down alternate</option>
                            <option value="sliceAltUp">up alternate</option>
                            <option value="blindsDown">down blinds</option>
                            <option value="blindsUp">up blinds</option>
                        </optgroup>
                        <optgroup label="blocks">
                            <option value="diagonalFade">diagional fade</option> 
                            <option value="diagonalExpand">diagional expand</option> 
                            <option value="reverseDiagonalFade">reverse diagional fade</option> 
                            <option value="reverseDiagonalExpand">reverse diagional expand</option> 
                            <option value="blockRandomFade">random fade</option> 
                            <option value="blockRandomExpand">random expand</option>	
                            <option value="blockRandomDrop">random drop</option>
                            <option value="spiralIn">spiral in</option>
                            <option value="spiral.out">spiral out</option> 
                            <option value="zigZagDown">zig zag down</option>
                            <option value="zigZagUp">zig zag up</option>
                            <option value="zigZagRight">zig zag right</option>
                            <option value="zigZagLeft">zig zag left</option>
                            <option value="blockExpandDown">expand down</option>
                            <option value="blockExpandUp">expand up</option>
                            <option value="blockExpandRight">expand right</option>
                            <option value="blockExpandLeft">expand left</option>
                        </optgroup>                        
                    </select>
                </div>
              	<div class="form-sec">
                	<label for="easing"><b>Transition easing:</b></label>
                    <select name="easing" id="easing">
                    	<option value="linear">linear</option>
                        <option value="swing" selected="selected">swing</option>
                        <option value="easeInQuad">easeInQuad</option> 
                        <option value="easeOutQuad">easeOutQuad</option> 
                        <option value="easeInOutQuad">easeInOutQuad</option> 
                        <option value="easeInCubic">easeInCubic</option> 
                        <option value="easeOutCubic">easeOutCubic</option> 
                        <option value="easeInOutCubic">easeInOutCubic</option> 
                        <option value="easeInQuart">easeInQuart</option> 
                        <option value="easeOutQuart">easeOutQuart</option> 
                        <option value="easeInOutQuart">easeInOutQuart</option> 
                        <option value="easeInQuint">easeInQuint</option> 
                        <option value="easeOutQuint">easeOutQuint</option> 
                        <option value="easeInOutQuint">easeInOutQuint</option> 
                        <option value="easeInSine">easeInSine</option> 
                        <option value="easeOutSine">easeOutSine</option> 
                        <option value="easeInOutSine">easeInOutSine</option> 
                       	<option value="easeInExpo">easeInExpo</option> 
                        <option value="easeOutExpo">easeOutExpo</option> 
                        <option value="easeInOutExpo">easeInOutExpo</option>
                        <option value="easeInCirc">easeInCirc</option> 
                        <option value="easeOutCirc">easeOutCirc</option> 
                        <option value="easeInOutCirc">easeInOutCirc</option>  
                        <option value="easeInElastic">easeInElastic</option> 
                        <option value="easeOutElastic">easeOutElastic</option> 
                        <option value="easeInOutElastic">easeInOutElastic</option> 
                        <option value="easeInBack">easeInBack</option> 
                        <option value="easeOutBack">easeOutBack</option> 
                        <option value="easeInOutBack">easeInOutBack</option> 
                        <option value="easeInBounce">easeInBounce</option> 
                        <option value="easeOutBounce">easeOutBounce</option> 
                        <option value="easeInOutBounce">easeInOutBounce</option>                         
                    </select>
                </div>
                <div class="form-sec">
                    <label for="cpalignments"><b>Control Panel Position:</b></label><br/>
                    <select name="cpalignments" id="cpalignments">
                        <option value="TL">top left</option>
                        <option value="TC">top center</option>
                        <option value="TR">top right</option>
                        <option value="BL">bottom left</option>
                        <option value="BC">bottom center</option>
                        <option value="BR" selected="selected">bottom right</option>
                        <option value="LT">left top</option>
                       	<option value="LC">left center</option>
                        <option value="LB">left bottom</option>
                        <option value="RT">right top</option>
                       	<option value="RC">right center</option>
                        <option value="RB">right bottom</option>
                    </select>
             	</div>
            	<div class="form-sec">       
                    <table>
                    <tr>
                    	<td><input type="radio" name="cp-pos" value="inside"  id="pos-inside" checked="checked"/>&nbsp;<label for="pos-inside" id="inside-label">inside</label></td>
                        <td><input type="radio" name="cp-pos" value="outside" id="pos-outside"/>&nbsp;<label for="pos-outside"  id="outside-label">outside</label></td>
                   	</tr>
                    </table>
                </div>
                <div class="form-sec">
                    <label for="thumb-type"><b>Thumbnail Type:</b></label><br/>
                    <select name="thumb-type" id="thumb-type">
                        <option value="none">none</option>
                        <option value="empty">empty</option>
                        <option value="number" selected="selected">number</option>
                        <option value="image">image</option>
                        <option value="text">text</option>
                    </select>
             	</div>
                <div class="form-sec">
                    <label for="db-type"><b>Directional Buttons Type:</b></label><br/>
                    <select name="db-type" id="db-type">
                        <option value="none">none</option>
                        <option value="small" selected="selected">normal</option>
                        <option value="large">side</option>
                    </select>
             	</div>
                <div class="form-sec">
                    <label for="tt-type"><b>Tooltip:</b></label><br/>
                    <select name="tt-type" id="tt-type">
                    	<option value="none">none</option>
                        <option value="image" selected="selected">image</option>
                        <option value="text">text</option>                                          
                    </select>
                </div>
                <div class="form-sec">
                    <b>Display:</b><br/>
                    <table style="padding:0;">
                    <tr>
                    	<td style="width:95px;"><input type="checkbox" id="playbutton-cb" name="playbutton-cb" checked="checked"/>&nbsp;<label for="playbutton-cb">play button</label></td>
                        <td><input type="checkbox" name="timer-cb" id="timer-cb" checked="checked"/>&nbsp;<label for="timer-cb">timer bar</label></td>
                    </tr>
                    </table>
                </div>   
                <div class="form-sec">
                    <b>Mouseover:</b><br/>
                    <table style="padding:0;">
                    <tr>
                    	<td style="width:95px;"><input type="checkbox" id="pause-cb" name="pause-cb"/>&nbsp;<label for="pause-cb">pause</label></td>
                        <td><input type="checkbox" id="text-cb" name="text-cb"/>&nbsp;<label for="text-cb">text panel</label></td>
                    </tr>
                    <tr>
                    	<td colspan="2"><input type="checkbox" id="cpanel-cb" name="cpanel-cb"/>&nbsp;<label for="cpanel-cb" id="mouse-cp-label">control panel</label></td>
                    </tr>
                    <tr>
                    	<td colspan="2"><input type="checkbox" id="dbuttons-cb" name="dbuttons-cb"/>&nbsp;<label for="dbuttons-cb">side directional buttons</label></td>
                    </tr>
                    </table>
                </div>
                <div class="form-sec"><input type="button" value="Submit" id="submit-btn"/>&nbsp;<input type="button" value="Reset" id="reset-btn" style="width:55px"/></div>                
           </form> 
        </div>
	  	<div class="description">
            <p>
                This is a jQuery banner rotator plugin featuring multiple transitions. 
                The thumbnails and buttons allow for easy navigation of your banners. 
                The banner rotator is also re-sizable and configurable through the plugin's parameters and stylesheet.            </p>
            <p><b>Features:</b></p>
            <ul>
                <li>Different image transition effects available, including fade, horizontal and vertical slide plus many others. (40+ in total).</li>
                <li>Load unlimited number of images, each with customizable descriptions, tooltip, and hyperlink.</li>
                <li>Can set to auto play on startup with customizable time delay for each image.</li>
                <li>Add multiple description layers over image.</li>
                <li>Description layers support html tags as well as plain text.</li>
                <li>Effect, speed, easing, and delay adjustable for each description layer.</li>
                <li>Thumbnails support number, caption, or image.</li>
                <li>Able to arrange images in set order or shuffle images in random order.</li>
                <li>Customizable control panel layout.</li>
                <li>Banner, thumbnails, and buttons are all resizable.</li>
                <li>Can set text description and control panel to appear on mouseover.</li>
                <li>Able to display multiple banner rotators on a single page.</li>
                <li>Support for swipe navigation on mobile devices.</li>
            </ul>
        </div>
    </div>	
  	<div class="copyright">copyright &copy; 2010-2013 <a href="http://codecanyon.net/user/webtako" target="wt">webtako</a>.</div>
</div>
</body>    
</html>
